<template>
  <div class="com-container">
      <div class="com-chart" ref="stock_ref" :style="comHeight"></div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            chartInstance:null,
            allData:null,
            titleFontSize:0,
            windowHeight:0,
            currentIndex:0,
            timerId:null
        }
    },
    computed:{
        comHeight(){
            return {
                height:this.windowHeight-160+'px'
            }
        }
    },
    created(){
        this.windowHeight=window.innerHeight;
    },
    mounted(){
        this.initChart();
        this.getData();
        this.screenAdapter();
        window.addEventListener('resize',this.screenAdapter);
    },
    destroyed(){
        clearInterval(this.timerId);
        window.removeEventListener('resize',this.screenAdapter);
    },
    methods:{
        initChart(){
            const initOption ={
                 title: {
                    text: '▎库存和销量分析',
                    left: 20,
                    top: 20
                }
            };
            this.chartInstance = window.echarts.init(this.$refs.stock_ref,'chalk');
            this.chartInstance.setOption(initOption);
            this.chartInstance.on('mouseover',()=>{
                clearInterval(this.timerId)
            })
            this.chartInstance.on('mouseout',()=>{
                this.startInterval();
            })
        },
        async getData(){
            //得到数据
            const {data:ret} =await axios.get('http://localhost:8888/stock')
            this.allData =ret;
            console.log(this.allData);
            
            this.startInterval()
        },
        updateChart(){
             const centerArr = [
                ['18%', '40%'],
                ['50%', '40%'],
                ['82%', '40%'],
                ['34%', '75%'],
                ['66%', '75%']
            ];
            const colorArr = [
                ['#4FF778', '#0BA82C'],
                ['#E5DD45', '#E8B11C'],
                ['#E8821C', '#E55445'],
                ['#5052EE', '#AB6EE5'],
                ['#23E5E5', '#2E72BF']
            ]
            var start =(this.currentIndex)*5;
            var end =(this.currentIndex+1)*5
            var showData =this.allData.slice(start,end);
            console.log("============showData=============");
            console.log(start);
            console.log(end);
            console.log(showData);
            const seriesArr = showData.map((item,index)=>{
                return{
                    type:'pie',
                    radius:[110,100],
                    center:centerArr[index],
                    hoverAnimation: false, // 关闭鼠标移入到饼图时的动画效果
                    labelLine: {
                            show: false // 隐藏指示线
                        },
                    label: {
                            position: 'center',
                            color: colorArr[index][0]
                        },
                    data:[
                        {
                            name: item.name + '\n' + item.sales,
                            value:item.sales,
                            itemStyle:{
                                color :new window.echarts.graphic.LinearGradient(0,1,0,0,[
                                    {
                                        offset:0,
                                        color:colorArr[index][0]
                                    },
                                    {
                                        offset:1,
                                        color:colorArr[index][1]
                                    }
                                ])
                            }
                        },
                        {
                            value:item.stock,
                            itemStyle:{
                                color: '#333843'
                            }
                        }
                    ]
                }
            })
            const dataOption ={
                series:seriesArr
            };
            this.chartInstance.setOption(dataOption);

        },
        screenAdapter(){
            const titleFontSize =this.$refs.stock_ref.offsetWidth/100*3.6;
            const innerRadius = titleFontSize * 2
            const outterRadius = innerRadius * 1.125
            const adapterOption = {
                title: {
                textStyle: {
                    fontSize: titleFontSize/2
                }
                },
                series: [
                {
                    type: 'pie',
                    radius: [outterRadius, innerRadius],
                    label: {
                    fontSize: titleFontSize / 3
                    }
                },
                {
                    type: 'pie',
                    radius: [outterRadius, innerRadius],
                    label: {
                    fontSize: titleFontSize / 3
                    }
                },
                {
                    type: 'pie',
                    radius: [outterRadius, innerRadius],
                    label: {
                    fontSize: titleFontSize / 3
                    }
                },
                {
                    type: 'pie',
                    radius: [outterRadius, innerRadius],
                    label: {
                    fontSize: titleFontSize / 3
                    }
                },
                {
                    type: 'pie',
                    radius: [outterRadius, innerRadius],
                    label: {
                    fontSize: titleFontSize / 3
                    }
                }
                ]
                }
            // console.log("============offsetHeight============");
            console.log(window.innerHeight); 
            this.windowHeight =window.innerHeight;
            this.chartInstance.setOption(adapterOption);
            console.log(this.currentIndex);
            this.chartInstance.resize();
        },
        startInterval(){
            if(this.timerId){
                clearInterval(this.timerId)
            }
            this.timerId = setInterval(()=>{
                this.currentIndex++;
                if(this.currentIndex>1){
                    this.currentIndex =0;
                }
                this.updateChart();
            },2000)
            
        }

    }

}
</script>

<style>

</style>